Estrutura HTML: O Esqueleto Semântico
Este é um excelente exemplo de como a semântica (o significado das tags) trabalha em conjunto com o CSS (a apresentação visual). Vamos decompor o código para você entender por que cada parte é importante, tanto para os motores de busca (SEO) quanto para a organização do layout.
Por que o CSS é tão popular?
1. Estrutura HTML: O Esqueleto Semântico
Em vez de usar apenas < div >, este código usa tags que explicam ao navegador o que cada parte é.
• < header >: Define o cabeçalho. Não é apenas "o topo", mas o local que contém a introdução do site e o logotipo.
• < nav >: Indica que ali reside o menu principal de navegação. Isso ajuda leitores de tela para deficientes visuais a encontrar o menu rapidamente.
• < main >: O conteúdo principal e exclusivo desta página. Um site deve ter apenas um < main > por página.
• < section >: Agrupa conteúdos que têm um tema comum (ex: "Sobre o Projeto").
• < article >: Representa um conteúdo independente. Se você recortasse esse bloco e colasse em outro site, ele ainda faria sentido (como um post ou notícia).
• < aside >: Conteúdo relacionado de forma indireta (barras laterais, anúncios ou links extras).
• footer>: O rodapé, contendo direitos autorais e informações de contato.
O CSS: Dando Vida e Forma
2. O CSS: Dando Vida e Forma
O CSS transforma essa lista de tags em um layout moderno e organizado. Aqui estão os pontos-chave:
O "Reset" e o Box Model
CSS
* { margin: 0; padding: 0; box-sizing: border-box; }
Isso remove as margens padrão do navegador que costumam "quebrar" o layout e garante que, ao adicionar
padding (espaçamento interno), o elemento não aumente de tamanho total.
Layout com Flexbox e Grid
O código utiliza as duas ferramentas mais poderosas de layout atuais:
1. Flexbox no Header: O display: flex com justify-content: space-between empurra o logotipo para a
esquerda e o menu para a direita automaticamente.
2. CSS Grid no Main: * display: grid;
o grid-template-columns: 3fr 1fr; -> Cria duas colunas: a primeira é 3 vezes maior que a segunda (o
aside).
O Footer "Grudado" (Sticky Footer)
O uso de display: flex no body com flex-direction: column e min-height: 100vh faz com que o rodapé fique
sempre na parte inferior da tela, mesmo que a página tenha pouco texto. O segredo está no flex: 1
aplicado ao < main >.
O código inclui um bloco @media (max-width: 768px). Isso significa que, quando o usuário abrir o site em um celular:
• As colunas do main deixam de existir (grid-template-columns: 1fr).
• O conteúdo fica "empilhado" verticalmente, facilitando a leitura em telas estreitas.
Resumo das Melhores Práticas Presentes
Recurso Benefício
Tags Semânticas Melhora o SEO (Google) e a Acessibilidade.
Variáveis de Unidade (rem) Facilita a escalabilidade do texto.
Transições (transition) Melhora a experiência do usuário (UX) ao passar o mouse nos links.
Grid & Flexbox Layout moderno que não quebra facilmente.